<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">
<!-- 引入jquery的js -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>

<!-- 引入boostrap的表格的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>

<!-- 引入bootstrap的日期的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 引入fileinput 文件上传的 css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>

<body>
<button onclick="openAdd()" class="btn btn-primary glyphicon glyphicon-plus" type="button">新增影院</button>
<table class="table" id="myTable"></table>
</body>
<script>
    //页面加载
    $(function(){
        initTable();
    })
    //初始化列表
    function initTable(){
        $('#myTable').bootstrapTable({
            toolbar:'#toolbar',//工具栏
            url:'../cinema/queryCinema',//获取数据地址
            pagination:true, //是否展示分页
            pageList:[2, 4, 6, 10],//分页组件
            pageNumber:1,//默认页码
            pageSize:2,//默认每页条数
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页（*
            striped:true,//斑马线
            queryParams:function(){
                return {
                    page: this.pageNumber,
                    rows: this.pageSize
                };
            },
            columns:[
                {field:"checkbox",checkbox:true},
                {field:"cinemaId",title:"id"},
                {field:"address",title:"地区",
                    formatter(value,row,index){
                        return row.city+"--"+row.county;
                    }
                },
                {field:"cinema",title:"影院名称"},
                {field:"cinemaSite",title:"详细地址"},
                {field:"cinemaImg",title:"影院图片",
                    formatter(value,row,index){
                        return "<img style='width:50px;height:50px' src='"+value+"'>"
                    }
                },
                {field:"tool",title:"操作",formatter:function(value,row,index){
                            return  "<a href='javascript:delOpen("+row.cinemaId+")'>去除影院</a>";
                    }}
            ]
        });
    }
    var res;
    function createAddContent(url){
        $.ajax({
            url:url,
            async:false,//同步
            success:function(data){
                res = data;
            }
        });
        return res;
    }
    //删除
    function delOpen(id){
        bootbox.confirm({
            size: "small",
            title: "提示",
            message: "是否确认删除？",
            buttons: {
                confirm: {
                    label: '确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
            callback: function(result){
                if(result){//删除
                    //调用ajax请求后台，回调刷新表格
                    $.ajax({
                        url:"../cinema/delAll",
                        type:"post",
                        data:{ids:id},
                        success:function(data){
                            $('#myTable').bootstrapTable("refresh");
                            //刷新表格:有条查调用条查，没有条查自己写refresh方法

                        }
                    })
                }
            }
        })
    }
    //新增影院
    function openAdd() {

        bootbox.dialog({
            asycn:false,
            title:'新增影院',
            message: createAddContent("../page/toAdd"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        var countyId= $("#countyId").val();
                        if(countyId==-1){
                            alert("未选择区，不可提交")
                            return ;
                        }
                        //提交表单
                        $.ajax({
                            url:"../cinema/addCinema",
                            type:'post',
                            data:$("#cinemaForm").serialize(),//表单序列化
                            success:function(data){
                                alert("添加影院成功")
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
        uploadImg();
        $.ajax({
            url:"../cinema/getCity",
            async:false,
            success:function (data) {
                var str="<option value='-1'>未选择</option>"
                for (let i = 0; i <data.length ; i++) {
                    str+="<option value='"+data[i].addressId+"'>"+data[i].addressName+"</option>"
                }
                $("#city").html(str);
            }
        })

    }

    //获取县
    function getCountyId(cityId) {
        $.ajax({
            url:"../cinema/getCounty",
            data:{cityId:cityId},
            success:function (data) {
                var str="<option value='-1'>未选择</option>"
                for (let i = 0; i <data.length; i++) {
                    str+="<option value='"+data[i].addressId+"'>"+data[i].addressName+"</option>"
                }
                $("#countyId").html(str);
            }
        })
    }
    //修改影院
    function upOpen(cinemaId) {
        bootbox.dialog({
            title:'修改',
            message: createAddContent("../page/toAdd"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"../cinema/addCinema",
                            type:'post',
                            data:$("#cinemaForm").serialize(),//表单序列化
                            success:function(data){
                                alert("更改成功")
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
        $.ajax({
            url:"../cinema/getCity",
            async:false,
            success:function (data) {
                var str="<option value='-1'>未选择</option>"
                for (let i = 0; i <data.length ; i++) {
                    str+="<option value='"+data[i].addressId+"'>"+data[i].addressName+"</option>"
                }
                $("#city").html(str);
            }
        })

        $.ajax({
            url:'../cinema/byId',
            data:{cinemaId:cinemaId},
            async:false,
            success:function (data) {

                $.ajax({
                    url:"../cinema/getCounty",
                    data:{cityId:data.city2},
                    async:false,
                    success:function (data) {
                        var str="<option value='-1'>未选择</option>"
                        for (let i = 0; i <data.length; i++) {
                            str+="<option value='"+data[i].addressId+"'>"+data[i].addressName+"</option>"
                        }
                        $("#countyId").html(str);
                    }
                })
                $("#cinemaId").val(data.cinemaId);
                $("#cinema").val(data.cinema);
                $("#city").val(data.city2);
                $("#countyId").val(data.countyId);
                $("#name").val(data.name);
            }
        })
    }
    //根据id查看所有影厅
    function getHall(id) {
        location.href="../page/getHall?id="+id;
    }

    //上传图片
    function uploadImg(url){
        // 注意id
        $('#mimg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '../carousel/img', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#testimg').val(imgval);
        });
    }
</script>

</html>